<template>
  <Headers page="list" />
  <div class="content">    
    <el-card  style="margin: 10px">
      <el-date-picker
        v-model="usedate"
        type="date"
        placeholder="选择日期"
        size="large"
        value-format="YYYY-MM-DD"      
        style="margin-bottom:10px"
      />
      <el-descriptions
        class="margin-top"      
        :column="6"       
        border
        direction="vertical"
        title="汇总"
      >       
      <template #extra>
      <el-button type="primary" @click="onRefresh()">刷新</el-button>
    </template>
        <el-descriptions-item label="数量">          
          {{summary.num}}
        </el-descriptions-item>
        <el-descriptions-item label="现金金额">          
          ￥{{summary.cash}}
        </el-descriptions-item>    
        <el-descriptions-item label="现金补差">         
          ￥{{summary.sceneCash}}
        </el-descriptions-item>        
        <el-descriptions-item label="扫码金额">          
          ￥{{summary.scan}}
        </el-descriptions-item>     
        <el-descriptions-item label="扫码补差">         
          ￥{{summary.sceneScan}}
        </el-descriptions-item>    
        <el-descriptions-item label="月结补差">         
          ￥{{summary.sceneSettle}}
        </el-descriptions-item>     
      </el-descriptions>
    </el-card>
    <el-card v-for="item in orders" :key="item.id" style="margin: 10px">
      <el-row style="height: 40px">
        <el-col :span="18">订单号：{{ item.ordersn }}</el-col>
        <el-col :span="6"
          >
          <el-popconfirm title="确认要退款吗？" @confirm="onRefundOrder(item.ordersn)" v-if="item.status==2 && item.suit[0].paysource!='微信'">
            <template #reference>
              <el-button            
                type="warning"               
              >
                退款
          </el-button>
            </template>
          </el-popconfirm>
          <el-button            
            type="primary"
            @click="onPrint(item)"
            v-print="print"
            v-if="item.status!=1 && item.status!=3 && item.status!=4"
          >
            打印
          </el-button>
          
          </el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">线路：{{ item.suit[0].productname }}</el-col>
        <el-col :span="12">车型：{{ item.suit[0].suit_name }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="14"
          >航班：{{ item.suit[0].usedate }}({{ item.suit[0].flight }})</el-col
        >
        <el-col :span="10" v-if="item.suit[0].drivernum == '1'"
          ><div style="color: red">含跟车司机</div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">姓名：{{ item.suit[0].linkman }}</el-col>
        <el-col :span="12">电话：{{ item.suit[0].linktel }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">证件：{{ item.suit[0].linkidcard }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">长度：{{ item.suit[0].car[0].size }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">车型：{{ item.suit[0].car[0].cartype }}{{ item.suit[0].remark?'('+item.suit[0].remark+')':'' }}</el-col>
        <el-col :span="12">车牌：{{ item.suit[0].car[0].carnumber }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">车辆价格：{{ item.suit[0].price }}</el-col>
        <el-col :span="12" v-if="item.suit[0].drivernum == '1'"
          >司机价格：{{ item.suit[0].driverprice }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">补差价：{{ item.scenepay }}</el-col>
        <el-col :span="12" style="color:red">总金额：{{ (Number(item.price) + Number(item.scenepay)).toFixed(2) }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="item.suit[0].status == '1'"
          >订单状态：待支付</el-col
        >
        <el-col :span="12" v-if="item.suit[0].status == '2'"
          >订单状态：已支付</el-col
        >
        <el-col :span="12" v-if="item.suit[0].status == '3'"
          >订单状态：已关闭</el-col
        >
        <el-col :span="12" v-if="item.suit[0].status == '4'"
          >订单状态：已退款</el-col
        >
        <el-col :span="12" v-if="item.suit[0].status == '5'"
          >订单状态：已核销</el-col
        >
        <el-col :span="12">支付方式：{{ item.suit[0].paysource }}</el-col>
      </el-row>
      <el-row v-if="item.finishtime">
        <el-col :span="12" 
          >核销时间：{{ item.finishtime }} </el-col
        >   
        <el-col :span="12"
          >核销员：{{ item.verify_admin }}</el-col
        >    
      </el-row>
      <el-row v-if="item.suit[0].saleman">       
        <el-col :span="12" 
          >销售员：{{ item.suit[0].saleman }}</el-col
        >    
      </el-row>
    </el-card>
  </div>
  <div id="printContent" v-if="printData">
    <div class="box">
      <div class="printBox">
        <div>
          <div>订单编号：{{ printData.ordersn }}</div>
          <div>路　　线：{{ printData.productname }}</div>
          <div>票　　类：{{ printData.suit[0].suit_name }}</div>
          <div>
            使用日期：{{ printData.suit[0].usedate }}（{{
              printData.suit[0].flight
            }})
          </div>
          <div>姓　　名：{{ printData.suit[0].linkman }}</div>
          <div>电　　话：{{ printData.suit[0].linktel }}</div>
          <div>车牌号码：{{ printData.suit[0].car[0].carnumber }}</div>
          <div>车辆票价：{{ (parseFloat(printData.suit[0].price)+parseFloat(printData.scenepay)).toFixed(2) }}</div>
          <div v-if="printData.suit[0].drivernum == '1'">
            司机票价：{{ printData.suit[0].driverprice }}
          </div>         
          <div>
            操　　作：{{ printData.suit[0].saleman }}
          </div>
          <div>
           {{ printData.addtime }}
          </div>
        </div>
        <div class="qrcode">
          <div v-if="printData.suit[0].drivernum == '1'">含司机</div>
          <VueQrcode
            :value="'https://www.chuandaolundu.com/h5/#/subPackages/verify/order?eticketno=' +printData.suit[0].eticketno"
            :color="{}"
            :width="100"
            type="image/png"
          />
          <div>凭此二维码核销</div>
          <div>{{ printData.suit[0].car[0].cartype }} {{ printData.suit[0].remark?'('+printData.suit[0].remark+')':'' }}</div>
          <div>{{ printData.suit[0].paysource }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Headers from "@/components/Header.vue";
import { onMounted, ref, reactive } from "vue";
import request from "@/utils/request";
import VueQrcode from "vue-qrcode";
import { todayDate } from "@/utils/tools";
import { ElMessageBox } from "element-plus";
onMounted(async () => {
  usedate.value = todayDate();
  onRefresh()
});
const printData = ref();
const orders = ref([]);
const summary = ref({});
const print = reactive({
  id: "printContent",
});
const usedate = ref("")
const onRefresh=()=>{
  getList()
  getSummary()
}

const onPrint = (data) => {
  printData.value = data;
};
const getList=async ()=>{
  let params = {
    url: "/scene/order/list",
    method: "POST",
    data: {
      usedate:usedate.value,
      page: 1,
      pagesize: 10,
    },
  };
  let res = await request(params);
  if (res.status) {
    orders.value = res.data.list;
  }
}
const getSummary = async ()=>{
  let params = {
    url: "/scene/order/summary",
    method: "POST",
    data: {
      usedate:usedate.value
    }
  };
  let res = await request(params);
  summary.value = res.data;
}

const onRefundOrder = async (ordersn)=>{
  let params = {
    url: "/scene/order/refund_order",
    method: "POST",
    data: {
      ordersn:ordersn
    }
  };
  let res = await request(params);
  if(res.status){
    ElMessageBox.alert("退款成功");
  }else{
    ElMessageBox.alert("退款失败");
  }  
  getList()
}
</script>

<style scoped>
.content {
  margin: 20px auto;
  max-width: 600px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}
#printContent {
  display: none;
}
@media print {
  @page {
    size: auto; /* auto is the initial value */
    margin: 0 0;
  }

  #printContent {
    display: flex;
  }
  .box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .printBox {
    width: 95%;
    display: flex;
    flex-direction: row;
    margin-top:5px;
    transform: rotate(180deg);
    font-size: 12px;
    position: relative;
  }
  .printBox div{
    line-height: 20px;
  }
  .qrcode {
    position: absolute;
    margin: 20px 0 0 0px;
    text-align: center;
    right: 0px;
  }
}
.el-row {
  height: 26px;
}
</style>